<template>
  <!--借款记录-->
  <div class="LoanAnnal" v-show="isShowHtml">
    <ul v-infinite-scroll="loadMore"
        infinite-scroll-immediate-check="false"
        infinite-scroll-distance="10" class="annalBox" v-if="annal.data.length>0">
      <li v-for="(item,index) in annal.data">
        <p>{{item.products_name}}<span>{{item.created_at.slice(0,10)}}</span><b>{{item.amount}}</b></p>
        <p><span>货款编号{{item.loan_number}}</span><b class="annalPeriod">{{item.periods}}期</b></p>
        <div class="annalBut">
          <span>{{ LoanStatus[item.status]}}</span>
          <router-link tag="p" :to="{path:'LoanDetails',query:{id:item.id,type:item.type,status:item.status}}">查看详情</router-link>
          <router-link tag="p" :to="{path:'Plan',query:{id:item.id}}">还款计划</router-link>
        </div>
      </li>
    </ul>

    <loading v-if="isLoading"></loading>

    <no-record v-if="annal.data.length===0"></no-record>
  </div>
</template>

<script>
  import NoRecord from './NoRecord'
  import loading from './../common/Loading'

  export default {
    name: 'LoanAnnal',
    components: {
      NoRecord,
      loading
    },
    data() {
      return {
        isShowHtml: false,
        isLoading:false,
        annal: {
          data: [],
          last_page: '1',
          current_page: '1'
        },
        LoanStatus:{
          '0':'未完成',
          '1':'等待初审',
          '2':'等待复审',
          '3':'等待面签',
          '4':'等待放款' ,
          '5':'放款',
          '6':'借款失败'
        }
      }
    },
    created() {
      this.$indicator.open()
    },
    mounted() {
      this.$api.getUserRecord().then((res) => {
        this.annal = res.data;
        this.$indicator.close();
        this.isShowHtml = true;
      }).catch(() => {
        this.$indicator.close();
        this.isShowHtml = true;
      })
    },
    methods: {
      loadMore() {
        if (this.annal.current_page < this.annal.last_page) {
          this.isLoading = true;
          this.$api.getUserRecord({page:this.annal.current_page+1}).then((res)=>{
            this.isLoading = false;
            this.annal.current_page = res.data.current_page;
            this.annal.data=this.annal.data.concat(res.data.data);
          }).catch(()=>{
            this.isLoading = false;
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .LoanAnnal {
    width: 100%;
    height: 100%;

    .annalBox {
      background-color: #f2f2f2;

      li {
        padding: 30px;
        margin-bottom: 20px;
        background: rgba(255, 255, 255, 1);

        p {
          font-size: 28px;
          font-family: SourceHanSansCN-Regular;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 72px;
          width: 100%;

          span {
            font-size: 24px;
            color: rgba(153, 153, 153, 1);
          }

          b {
            float: right;
            font-size: 36px;
            font-family: Arial-BoldMT;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            line-height: 72px;
          }

          .annalPeriod {
            font-size: 30px;
            font-family: SourceHanSansCN-Regular;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 72px;
          }
        }

        p:nth-child(1) {
          span {
            padding-left: 10px;
          }
        }
      }

      .annalBut {
        width: 100%;
        text-align: right;
        span{
          float: left;
          color: red;
          font-size: 30px;
        }
        p {
          display: inline-block;
          width: 150px;
          border-radius: 6px;
          text-align: center;
          font-size: 26px;
          font-family: SourceHanSansCN-Regular;
          font-weight: 400;
          line-height: 65px;
        }

        p:nth-child(2) {
          border: 1px solid rgba(231, 31, 24, 1);
          color: rgba(231, 31, 24, 1);

          span {
            padding-left: 10px;
          }
        }

        p:nth-child(3) {
          background: rgba(231, 31, 24, 1);
          color: rgba(255, 255, 255, 1);
          margin-left: 20px;
        }
      }
    }
  }
</style>
